<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      table {
        margin: auto;
        width: 80%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }
      table,
      th,
      td {
        border: 1px solid #4d3535;
      }
      th,
      td {
        padding: 10px;
        text-align: center;
      }
      th {
        background-color: #fbcecc;
        font-weight: bold;
      }
      tr:nth-child(even) {
        background-color: #fdf2f2;
      }
      tr:nth-child(odd) {
        background-color: #eddddd;
      }
      tr:hover {
        background-color: rgb(255, 255, 255);
        cursor: pointer;
      }

      .centered {
        text-align: center;
      }

      .centered button,
      #backBtn {
        background-color: #745353;
        color: #f2f2f2;
        width: 80px;
        height: 30px;
        border: none;
      }

      .centered button:hover {
        background-color: #dba6a5;
        color: #4d3535;
      }
      .quantity-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 80px;
        margin: 0 auto;
      }
      .quantity-input button {
        padding: 5px 10px;
        cursor: pointer;
        border: none;
        background-color: #6e5050;
        color: #f2f2f2;
      }

      .quantity-input button:hover {
        background-color: #ffb6b3;
        color: #4d3535;
      }
      .quantity-input input {
        width: 30px;
        text-align: center;
        border: 1px solid #ccc;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <!-- 表格部分 -->
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" id="checkAll" /></th>
          <th>编号</th>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" / class="cks"></td>
          <td>001</td>
          <td>商品A</td>
          <td>10.00</td>
          <td>
            <div class="quantity-input">
              <button class="quantity-btn" onclick="decrease(this)">-</button>
              <input type="text" class="quantity" value="2" />
              <button class="quantity-btn" onclick="add(this)">+</button>
            </div>
          </td>
          <td class="price">20.00</td>
          <td class="centered"><button>删除</button></td>
        </tr>
        <tr>
          <td><input type="checkbox" / class="cks"></td>
          <td>002</td>
          <td>商品B</td>
          <td>15.50</td>
          <td>
            <div class="quantity-input">
              <button class="quantity-btn" onclick="decrease(this)">-</button>
              <input type="text" class="quantity" value="1" />
              <button class="quantity-btn" onclick="add(this)">+</button>
            </div>
          </td>
          <td class="price">15.50</td>
          <td class="centered"><button>删除</button></td>
        </tr>
        <tr>
          <td><input type="checkbox" / class="cks"></td>
          <td>003</td>
          <td>商品C</td>
          <td>20.00</td>
          <td>
            <div class="quantity-input">
              <button class="quantity-btn" onclick="decrease(this)">-</button>
              <input type="text" class="quantity" value="3" />
              <button class="quantity-btn" onclick="add(this)">+</button>
            </div>
          </td>
          <td class="price">60.00</td>
          <td class="centered"><button>删除</button></td>
        </tr>
        <tr>
          <td>总价</td>
          <td id="allPrice"></td>
          <td></td>

          <td></td>
          <td></td>
          <td></td>
          <td><button id="backBtn">反选</button></td>
        </tr>
      </tbody>
    </table>

    <script>
      //  点击增加
      function add(num) {
        var input = num.previousElementSibling;
        input.value++;
      }

      //  点击减少
      function decrease(num) {
        var input = num.nextElementSibling;
        //输入框的数字不能为0
        if (input.value > 1) {
          input.value--;
        }
      }

      //全选反选
      //全选
      var checkAll = document.querySelector("#checkAll");
      var cks = document.querySelectorAll(".cks");
      //监听全选框
      checkAll.addEventListener("click", () => {
        for (let i = 0; i < cks.length; i++) {
          // 所有的小框等于大全选的状态
          cks[i].checked = checkAll.checked;
        }
      });

      for (var i = 0; i < cks.length; i++) {
        cks[i].addEventListener("click", () => {
          var cksCheck = document.querySelectorAll(".cks:checked");
          //   小框少一个取消全选的选中
          checkAll.checked = cksCheck.length === cks.length;
        });
      }

      //反选
      var backBtn = document.querySelector("#backBtn");
      backBtn.addEventListener("click", () => {
        for (var j = 0; j < cks.length; j++) {
          cks[j].checked = !cks[j].checked;
          //   小框少一个取消全选的选中
          var cksCheck = document.querySelectorAll(".cks:checked");
          checkAll.checked = cksCheck.length === cks.length;
        }
      });

      //小计与总计
      //求和函数
      function allPriceUp() {
        var allPrice = document.querySelector("#allPrice");
        var rowAllprice = document.querySelectorAll(".price");
        var totalPrice = 0;

        // 计算总价
        for (var j = 0; j < rowAllprice.length; j++) {
          totalPrice += Number(rowAllprice[j].innerHTML);
        }
        // 更新总价显示
        allPrice.innerHTML = totalPrice.toFixed(2);
      }

      //输入框输入数值函数
      function inputUp() {
        var quantity = document.querySelectorAll(".quantity");
        for (var i = 0; i < quantity.length; i++) {
          quantity[i].addEventListener("blur", function () {
            var price1 =
              this.parentNode.parentNode.previousElementSibling.innerHTML;
            var count1 = this.value;
            var rowPrice1 = this.parentNode.parentNode.nextElementSibling;
            rowPrice1.innerHTML = `${(price1 * count1).toFixed(2)}`;
            allPriceUp();
          });
        }
      }
      //调用求和函数初始化页面总计
      allPriceUp();
      var quantityInput = document.querySelectorAll(".quantity-input");
      for (var i = 0; i < quantityInput.length; i++) {
        quantityInput[i].addEventListener("click", function () {
          //  获取价格节点
          var price = this.parentNode.previousElementSibling.innerHTML;
          //   获取input内value数量
          var count = this.children[1].value;
          //   狠狠取两位小数
          var rowPrice = this.parentNode.nextElementSibling;
          rowPrice.innerHTML = `${(price * count).toFixed(2)}`;

          //调用求和函数刷新更新后的页面总计
          allPriceUp();
        });
        //   输入框控制数量
        inputUp();
      }

      //删除行
      var del = document.querySelectorAll(".centered>button");
      for (var i = 0; i < del.length; i++) {
        del[i].addEventListener("click", function () {
          if (confirm("确定删除吗？")) {
            this.parentNode.parentNode.remove();
            // 删除后再次调用输入框输入函数
            inputUp();
            // 调用求和函数刷新更新后的页面总计
            allPriceUp();
          }
        });
      }
    </script>
  </body>
</html>
